<template>
  <div class="container">
    <VerticalLayout>
      <!-- 插入搜索组件 -->
      <template #search>
        <el-space alignment="center">
          <DynamicQueryForm
            :show-match-range="false"
            :extra-fields="extraField"
            :columns-values="columnsValues"
            @submit="onSubmit"
          />
        </el-space>
      </template>

      <!-- 插入表格组件 -->
      <template #table>
        <CustomTable
          ref="customTableRef"
          :actions="null"
          :columns="columns"
          show-selection
          show-pagination
          @selection-change="onSelectionChange"
        >
          <!-- 左边功能 -->
          <template #action-left>
            <el-button type="primary" :icon="Histogram" @click="onSee">查看</el-button>
          </template>

          <!-- 右边功能 -->
          <template #action-right>
            <!-- <el-button :icon="Refresh" circle /> -->
          </template>

          <template #table-top v-if="selections.length > 0">
            <el-alert :closable="false">
              <template #title> 123123 </template>
            </el-alert>
          </template>
        </CustomTable>
      </template>
    </VerticalLayout>
    <PerformanceDetail ref="performanceDetailRef" />
  </div>
</template>

<script setup lang="ts">
import { Histogram } from '@element-plus/icons-vue';
import { columns } from './columns';
import { columnsValues, extraField } from './searchOptions';
import { ref } from 'vue';
import { reactive } from 'vue';

// table
const customTableRef = ref();
// 查看业绩详情
const performanceDetailRef = ref<any>();

// 选中项
const selections = ref<any>([]);
const onSelectionChange = (selection: any[]) => {
  selections.value = selection;
};

// 查看
const onSee = () => {
  performanceDetailRef.value?.show(1, '2025-08');
};

// 查询条件
const formInline = reactive({
  user: '',
  region: '',
  date: null
});

const onSubmit = () => {
  customTableRef.value?.search(formInline);
};
</script>

<style scoped lang="scss">
.container {
  padding: 16px;

  .productName {
    font-weight: bold;
  }

  .alertFpBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .payCount {
    cursor: pointer;
  }

  .remarkBox {
    .newReamark {
      display: block;
      text-wrap: wrap;
      text-align: left;
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 5px;
    }
  }
}
</style>
